<template>
  <div class='infraredCamera'>
    <div class='head' :style="{ backgroundImage: 'url(' + imgurl + ')' }">
      <div>
        <div class="head_l">
          <div class='ico'>
            <img src="../../static/images/icon/inf.png" alt="">
          </div>
          <div class='txt'>
            <span>红外相机</span>
          </div>
        </div>
        <div class='head_r'>
          <div>
            <img src="../../static/images/icon/tx.png" alt="">
          </div>
          <div>
            <span style='font-size: 0.16rem;'>{{ userName }}</span>
          </div>
        </div>
      </div>
    </div>
    <!--    主体部分 B-->
    <div class='container'>
      <!--      左侧子路由导航 B-->
      <div :class='small'>
        <div class='l_nav'>
          <router-link style="background-color: #fff;" :to='{ name: "rlc" }'>
            <div>
              <span class='icon iconfont icon-xiangji'></span>
            </div>
            <div>
              <span>相机分布</span>
            </div>
          </router-link>

          <router-link style="background-color: #fff;" :to='{ name: "historicalSetting" }'>
            <div>
              <span class='icon iconfont icon-shijian'></span>
            </div>
            <div>
              <span>布设历史</span>
            </div>
          </router-link>

          <!--        下拉项 B-->
          <div class='pull_down' @click='newxj'>
            <span :style='xj ? "color:#00CC46" : " color: #898a8b;"' class='icon iconfont icon-picture'></span>
            <span style='margin-right: .1rem;'>照片鉴定</span>
            <span v-if='!xj' class='icon iconfont icon-xiala'></span>
            <span v-else style='font-size: .16rem' class='icon iconfont icon-shangla-copy'></span>
          </div>

          <router-link v-show='xj' :to='{ name: "realphoto" }'>
            <div>
              <span class='icon iconfont icon-zhaopian1'></span>
            </div>
            <div>
              <span>实时相机</span>
            </div>
          </router-link>

          <router-link v-show='xj' :to='{ name: "PhotoIdentification" }'>
            <div>
              <span class='icon iconfont icon-zhaopian2'></span>
            </div>
            <div>
              <span>普通相机</span>
            </div>
          </router-link>

          <!--Emptyphoto-->
          <!-- <router-link v-show='xj' :to='{ name: "classify" }'>
            <div>
              <span class='el-icon-s-unfold'></span>
            </div>
            <div>
              <span>分类鉴定</span>
            </div>
          </router-link>

          <router-link v-show='xj' :to='{ name: "Emptyphoto" }'>
            <div>
              <span class='el-icon-s-marketing'></span>
            </div>
            <div>
              <span>疑似空照片</span>
            </div>
          </router-link> -->

          <router-link style="background-color: #fff;" :to='{ name: "history" }'>
            <div>
              <span class='icon iconfont icon-tongji1'></span>
            </div>
            <div>
              <span>历史数据</span>
            </div>
          </router-link>

          <router-link style="background-color: #fff;" :to="{ name: 'CardManagement' }">
            <div>
              <span class='icon iconfont icon-cunchuneicunka'></span>
            </div>
            <div>
              <span>相机卡管理</span>
            </div>
          </router-link>

          <!--        下拉项 B-->
          <div class='pull_down' @click='pd'>
            <span :style='xl ? "color:#00CC46" : " color: #898a8b;"' class='icon iconfont icon-tongji1'></span>
            <span style='margin-right: .1rem;'>统计分析</span>
            <span v-if='!xl' class='icon iconfont icon-xiala'></span>
            <span v-else style='font-size: .16rem' class='icon iconfont icon-shangla-copy'></span>
          </div>

          <router-link v-show='xl' :to='{ name: "SpeciesStatistics" }'>
            <div>
              <span class='icon iconfont icon-zhonglei'></span>
            </div>
            <div>
              <span>物种统计</span>
            </div>
          </router-link>

          <router-link v-show='xl' :to="{ name: 'statisticAnalysis' }">
            <div>
              <span class='icon iconfont icon-dingweiweizhi'></span>
            </div>
            <div>
              <span>布设统计</span>
            </div>
          </router-link>
          <!--        下拉项 E-->

          <router-link style="background-color: #fff;" :to="{ name: 'identificationResult' }">
            <div>
              <span class='icon iconfont icon-jianding'></span>
            </div>
            <div>
              <span>鉴定结果</span>
            </div>
          </router-link>

          <!--         闭合开关 B-->
          <div class='shiftknob' @click='controlzb' :style='zb ? "left: .55rem;" : "left:-10px"'>
            <img style='width: 100%;height: 100%;'
              :src="zb ? '../../static/images/nav/z.png' : '../../static/images/nav/b.png'" alt="">
          </div>
          <!--         闭合开关 E-->
        </div>
      </div>
      <!--      左侧子路由导航 E-->
      <!--      路由容器 B-->
      <div :class='big'>
        <router-view />
      </div>
      <!--      路由容器 E-->
    </div>
    <!--    主体部分 E-->

  </div>
</template>
<script>
export default {
  data() {
    return {
      imgurl: "",
      xj: false,
      xl: false,
      zb: true,
      big: {
        route_b: true,
        route_z: false,
        show_in: false,
        show_out: false
      },
      small: {
        sidebar: true,
        sidebar_s: false,
        sidebar_in: false,
        sidebar_out: false,
      },
      userName: ""
    }
  },
  created() {
    this.imgurl = window.sessionStorage.getItem('imgUrl')
    this.userName = sessionStorage.getItem('urseName')
    if (sessionStorage.getItem('x_status') != null) {
      if (sessionStorage.getItem('x_status') == 'true') {
        this.xl = true
      }
    }
    if (sessionStorage.getItem('j_status') != null) {
      if (sessionStorage.getItem('j_status') == 'true') {
        this.xj = true
      }
    }

    if (sessionStorage.getItem('z_status') != null) {
      if (sessionStorage.getItem('z_status') == 'true') {
        this.zb = true;
        this.big.route_b = true
        this.small.sidebar = true
      } else {
        this.zb = false;
        this.big.route_b = false
        this.big.route_z = true
        this.small.sidebar = false
        this.small.sidebar_s = true

      }
    }

  },
  watch: {
    $route(to, from) {
      if (to.path != '/SpeciesStatistics' && to.path != '/statisticAnalysis') {
        this.xl = false;
        sessionStorage.setItem('x_status', this.xl);
      }
      if (to.path.split("/")[1] != 'Photo') {
        this.xj = false;
        sessionStorage.setItem('j_status', this.xj);
      }
    }
  },
  mounted() {
  },
  methods: {
    newxj() {
      this.xj = !this.xj;
      sessionStorage.setItem('j_status', this.xj);
    },
    //下拉项4
    pd() {
      this.xl = !this.xl;
      sessionStorage.setItem('x_status', this.xl);
    },
    //控制闭合
    controlzb() {
      this.zb = !this.zb;
      sessionStorage.setItem('z_status', this.zb);
      this.animation();
    },
    //缓动动画
    animation() {
      if (this.zb) {
        this.big.route_z = false
        this.big.route_b = false
        this.big.show_in = true
        this.big.show_out = false

        this.small.sidebar = false
        this.small.sidebar_s = false
        this.small.sidebar_in = true
        this.small.sidebar_out = false

      } else {
        this.big.route_z = false
        this.big.route_b = false
        this.big.show_in = false
        this.big.show_out = true

        this.small.sidebar = false
        this.small.sidebar_s = false
        this.small.sidebar_in = false
        this.small.sidebar_out = true
      }
    }
  }
}
</script>
<style scoped>
@import "../../static/css/infraredCamera.css";
</style>
<!-- 太平沟更改：注掉实时相机 跳转直接跳转首页普通相机项-->
